/*import reset css*/ 
@import "compass/reset";

/*************************color declare*/ 
$headerBg: #f3f3f3;
$navHover: #e9e9e9;
$hoverBorder: #cccccc;
$navFont: #676767;
$blue: #00569f;

body {
  font-family: "Microsoft YaHei" !important;
  min-width: 1200px;
   background: #f3f3f3;
}



/*************************************************header start*/ 
.header {
    height: 92px;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    background-color: $headerBg;
    span {
        float: left;
        margin-top: 25px;
    }
}


/***************************************************mainheader start*/ 
  .mainheader {
        width: 1200px;
        margin: 0 auto;
        .mainnav {
            margin-left: 300px;
            width: 426px;
            float: left;
            overflow: hidden;
          >li {
            float: left;
            width: 140px;
            line-height: 92px;
            &:hover {
              background: $navHover;
            }
            &:hover>.subnav {
              display:block;
            }
            a {
              text-decoration: none;
              text-align: center;
              display: block;
              color: $navFont;
            }
          }
         .nav-border {
              display: block;
              height: 50px;
              border-right: 1px solid #e5e5e5;
              border-left: 1px solid #fff;
            }
          .nav-active {
            border-bottom: 2px solid #00569f;
          }
        }
    }

/****************************************************subnav start*/ 
  .subnav {
        display: none;
        height: 214px;
        background-color: $navHover;
        position: fixed;
        z-index: 3;
        left: 0;
        right: 0;
        border-top: 1px solid #fdfdfd;
        top: 93px;
         >ul {
            width: 872px;
            margin: 0 auto;
          }
         li {
            display: inline-block;
            width: 212px;
            height: 212px;
            border: 1px solid $navHover;
           &:hover {
              border: 1px solid #ccc;
            }
            &:hover .subnav-select{
                visibility: visible;
             }
            a {
              height: 212px;
            b {
               position: relative;
               top: -70px;
               left: 3px;
             }
            .subnav-select {
               visibility: hidden;
                background: url(../images/banner/checked.png) no-repeat;
                display: block;
                height: 15px;
                width: 16px;
                position: relative;
                left: 60px;
                top: 145px;
              }
              img {
                margin-top: -12px;
                }
              }
            }
        }


/***********************************************mainbar start*/ 
.mainbar {
          width: 215px;
          float: left;
          line-height: 92px;
          margin-left: 110px;
          position: relative;
         left: 29px;
          >li {
            float: left;
            margin-right: 20px;
              &:first-child  {
                a{
                  border-right: 1px solid #ccc;
                  padding-right: 10px;
                  margin-right: -10px;
                  color: #999;
                }
            }
            a {
              text-decoration: none;
              font-size: 14px;
              color: #ccc;
              img {
                margin-top: 25px;
              }
            }
          }
        /**********/ 
           .search {
              background: url(../images/nav/nav-icon.png) no-repeat;
              width: 36px;
              height: 34px;
              background-position: 0 0; 
              margin-top: 28px;
              cursor: pointer;
            }
        /**********/
            .shop {
              @extend .search;
              background-position: -34px 0; 
              position: relative;
              z-index: 4;
            }
        }

/***************************************search-box*/ 
.search-box {
  display: none;
  position: absolute;
    right: 0px;
  input {
    height: 38px;
    width: 266px;
    background: url(../images/nav/search-bg.png) no-repeat;
    border: none;
    padding-left: 50px;
    color: #ccc;
    font-size: 12px;
    &:focus {
      outline: none;
    }
    &:focus .input-state {
      background-position: -16px 0;
    }
  }
  .search-btn{
     background: url(../images/nav/search-btn-icon.png) no-repeat;
         height: 18px;
    width: 18px;
    display: block;
    position: absolute;
    right: 284px;
    top: 38px;
  }
  .input-state {
    background: url(../images/nav/input-state-icon.png) no-repeat;
     height: 16px;
     width: 16px;
     background-position: -16px 0;
     display: block;
    position: absolute;
    right: 62px;
    top: 38px;
  }
}

/*****************************************shop-list start*/ 
.shop-list {
        display: none;
        width: 300px;
        border: 1px solid $blue;
        position: relative;
        right: 305px;
        top: 63px;
        padding: 0 20px;
        background: #f3f3f3;
         cursor: auto;
         z-index: 2;
         .shop-list-triangle {
             background: url(../images/nav/shop-list-triangle.png) no-repeat;
             width: 9px;
             height: 5px;
             display: block;
             float: right;
             top: -6px;
             position: relative
         }
          .shop-list-infor {
             background: url(../images/nav/shop-list-infor.png) no-repeat;
             width: 27px;
             height: 27px;
             display: block;
             float: right;
              position: absolute;
              font-size: 12px;
              top: -80px;
              right: -6px;
             b {
                position: relative;
                top: -33px;
                left: 11px;
                color: #fff;
            }
         }
      /**********/
        .shop-pay {
          table {
            width: 100%;
            td {
              font-size: 12px;
              span {
                float: none;
              }
              .shop-pay-number{
                color: #999;
                span {
                    padding: 0 5px;
                  }
                } 
              .shop-pay-rmb {
                font-size: 14px;
                color: #333;
                font-weight: bold;
                span {
                  font-size: 16px;
                  color: $blue;
                  font-weight: normal;
                }
              }
              p {
                line-height: 20px;
              }
            }
            .shop-pay-btn button{
              width: 140px;
              height: 40px;
              background: $blue;
              border: none;
              color: #fff;
              font-size: 14px;
              margin-left: 41px;
              cursor:pointer;
              a {
                color: #fff;
              }
            }
          }
        }
      /**********/
        li {
          width: 300px;
          margin: 0 auto;
          border-bottom: 1px solid #e5e5e5;
          margin-top: 20px;
          padding-bottom: 9px;
          table {
            margin-top: -15px; 
            .shop-price {
              padding-left:20px;
              padding-bottom: 20px;
            }
            td {
              font-size:12px;
              img {
                vertical-align: middle;
                margin-right: 10px;
                padding-bottom: 15px;
                margin-top: 15px;
              }
              p{
                line-height: 20px;
              }
              i {
                 background: url(../images/nav/shop-close-icon.png) no-repeat;
                  width: 9px;
                  height: 9px;
                  display: block;
                  margin-left: 20px;
                  margin-bottom: 20px;
              }
            }
          }
        }
   }

/***************************************user-list*/ 
   .user-list {
      display: none;
      position: absolute;
      z-index: 2;
      width: 240px;
      height: 205px;
      background: #f3f3f3;
      border: 1px solid #ccc;
      border-radius: 4px;
      right: 72px;
      top: 75px;
      p {
        font-size:14px;
        color: #333;
      }
      .user-list-triangle {
         background: url(../images/nav/user-list-triangle.png) no-repeat;
         width: 9px;
         height: 5px;
         display: block;
         float: right;
         right: 121px;
         top: -6px;
         position: relative
      }
     >ul {
       margin-left: 17px;
       float: none;
       height: 70px;
       margin-bottom: 25px;
       margin-top: -10px;
      li {
        width: 111px;
        height: 12px;
        float: left;
        margin-bottom: 12px;
        &:first-child {
          font-size:14px;
          color: #333;
          float: none;
        }
        a {
          color: #666;
          border-right: none !important;
          font-size: 12px;
        }
        b{
          color: #ed9322;
        }
      }
     }
   }